<template>
    <div class="page-container">
      <a-flex :vertical="true">
        <a-card style="width: 100%;">
          <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState">
            <a-flex wrap="wrap" gap="small">
              <a-form-item name="username" label="权限名称">
                <a-input placeholder="请输入权限名称"></a-input>
              </a-form-item>
  
              <a-button type="primary" html-type="submit">搜索</a-button>
            </a-flex>
  
          </a-form>
        </a-card>
  
        <a-card style="width: 100%; margin: 12px 0 12px 0; min-height: calc(100vh - 250px);">
          <a-row :gutter="18">
            <a-col>
              <a-button type="primary">新建用户</a-button>
            </a-col>
            <a-col>
              <a-button>批量删除</a-button>
            </a-col>
          </a-row>
          <br />
          <a-table :columns="columns" :data-source="data" bordered :row-selection="rowSelection">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'password'">
                <a-space size="small">
                  <a-input-password v-model:value="record.password" v-model:visible="record.visible"
                    :visibility-toggle="false" :bordered="false" />
                  <a @click="record.visible = !record.visible">
                    <EyeOutlined v-if="record.visible" />
                    <EyeInvisibleOutlined v-else />
                  </a>
                </a-space>
              </template>
              <template v-else-if="column.key === 'tags'">
                <span>
                  <a-tag v-for="tag in record.tags" :key="tag"
                    :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                    {{ tag.toUpperCase() }}
                  </a-tag>
                </span>
              </template>
              <template v-else-if="column.key === 'action'">
                <span>
                  <a>重置密码</a>
                  <a-divider type="vertical" />
                  <a>删除</a>
                  <a-divider type="vertical" />
                </span>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-flex>
  
  
    </div>
  </template>
  
  <script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';
  import { DownOutlined, SmileOutlined, UpOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
  
  
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '密码',
      dataIndex: 'password',
      key: 'password',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '最近登录时间',
      key: 'lastLoginTime',
      dataIndex: 'lastLoginTime',
    },
    {
      title: '操作',
      key: 'action',
    },
  ];
  const data = reactive([
    {
      key: '1',
      username: 'John Brown',
      password: '123133asdfasd',
      visible: false,
      creator: 'admin',
      createTime: '2023-01-01',
    },
    {
      key: '2',
      username: 'Jim Green',
      password: '123133asdfa',
      creator: 'admin',
      createTime: '2023-01-01',
    },
    {
      key: '3',
      username: 'Joe Black',
      password: '123133sadfa',
      creator: 'admin',
    },
  ])
  const state = reactive<{
    selectedRowKeys: string | number[];
    loading: boolean;
  }>({
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  });
  
  const hasSelected = computed(() => state.selectedRowKeys.length > 0);
  const onSelectChange = (selectedRowKeys: string | number[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
  };
  const rowSelection = computed(() => ({
    selectedRowKeys: state.selectedRowKeys,
    onChange: onSelectChange,
  }))
  
  const formExpand = ref(false);
  const formState = reactive({
    name: '',
    age: '',
    address: '',
    tags: '',
  })
  
  </script>
  
  <style scoped lang="less">
  .page-container {
    width: 100;
    height: 100%;
  }
  </style>